<template>
	<div class="tools">
		<div class="bottom-content">
			<div class="base-tools">
				<ul>
					<el-tooltip :content="item.label" placement="top" v-for="(item, index) of baseToolsList" :key="index">
						<li class="tools-item" :class="{ 'active-item': item.active }" @click="baseToolsClick(item, index)">
							<!-- <i class="icon iconfont" :class="item.class"></i> -->
							<img :src="require('@/assets/images/tools/extend-tools/' + item.img)" alt="" />
							<!-- <div class="line"></div> -->
						</li>
					</el-tooltip>
				</ul>
			</div>
			<div class="extend-tools">
				<ul>
					<el-tooltip content="标绘" placement="top" key="-1">
						<li class="tools-item" :class="{ 'active-item': this.show3DDraw }" @click="click3DDraw">
							<img src="@/assets/images/tools/extend-tools/biaohui.png" alt="" />
							<!-- <div class="line"></div> -->
						</li>
					</el-tooltip>
					<el-tooltip :content="item.label" placement="top" v-for="(item, index) of extendToolsList" :key="index">
						<li class="tools-item" :class="{ 'active-item': item.active }" @click="extendToolsClick(item, index)">
							<!-- <i class="icon iconfont" :class="item.class"></i> -->
							<img :src="require('@/assets/images/tools/extend-tools/' + item.img)" alt="" />
							<!-- <div class="line"></div> -->
						</li>
					</el-tooltip>
				</ul>
			</div>
		</div>

		<!-- <el-dialog v-el-drag-dialog :visible.sync="currentComponent" @dragDialog="handleDrag"> -->
		<component :is="currentComponent" @close="closeFunc"></component>
		<Draw ref="3Ddraw" v-show="show3DDraw" @close="hide3DDraw" />
	</div>
</template>

<script>
import Draw from './draw/index';
import screenshots from './screenshots/screenshotsStatic';
import GraticuleLayer from '@/earth/tools/GraticuleLayer.js';
import elDragDialog from '@/directive/el-drag-dialog';
let graticuLayer = null;
let searchTimer = null;
export default {
	name: 'tools',
	directives: { elDragDialog },
	data() {
		return {
			graticuleShow: false,
			baseToolsList: [
				{
					class: 'icon-dizhizhuanjingweidu',
					img: 'jinwei.png',
					label: '经纬网',
					active: false,
					initFunc: this.graticuleToggle,
					closeFunc: this.closegraticuleToggle,
				},
			],
			extendToolsList: [
				{
					class: 'icon-celiang',
					img: 'celiang.png',
					label: '距离测量',
					active: false,
					initFunc: this.initMeasureDistance,
				},
				{
					class: 'icon-mianji',
					img: 'mianji.png',
					label: '面积测量',
					active: false,
					initFunc: this.initMeasureArea,
				},

				{
					class: 'icon-zhinanzhen',
					img: '专题制图.png',
					label: '专题制图',
					active: false,
					component: screenshots,
					closeFunc: this.closeCurComponent,
				},
			],
			infoBarList: [
				{
					label: '经度',
					val: '90',
				},
				{
					label: '纬度',
					val: '90',
				},
				{
					label: '相机高',
					val: '1000',
				},
				{
					label: '海拔',
					val: '2000',
				},
				{
					label: '层级',
					val: '2',
				},
			],
			currentComponent: null,
			currentCloseFunc: null,
			currentTool: null,

			show3DDraw: false,
			showGdDraw: false,
		};
	},

	components: {
		Draw,
	},
	mounted() {
		clearInterval(searchTimer);

		this.$nextTick(() => {
			if (typeof viewer !== 'undefined' && viewer) {
				// 经纬网
				graticuLayer = new GraticuleLayer({}, window.viewer.scene);

				// this.getParam()
			}
		});
	},
	methods: {
		// 基础工具点击
		baseToolsClick(curItem, index) {
			curItem.active = !curItem.active;
			if (curItem.active) {
				this.currentTool = curItem;
				// 加载对应工具
				curItem.initFunc && curItem.initFunc();
				// 加载对应组件
				this.currentComponent = curItem.component ? curItem.component : null;
				// 设置组件关闭方法
				this.currentCloseFunc = curItem.closeFunc ? curItem.closeFunc : null;
			} else {
				// 移除对应工具
				this.currentTool = null;
				curItem.closeFunc && curItem.closeFunc();
				// 移除对应组件
				if (curItem.component) {
					this.currentComponent = null;
				}
			}
		},
		click3DDraw() {
			this.show3DDraw = !this.show3DDraw;
			if (this.show3DDraw) {
				console.log('shenming');
				document.οncοntextmenu = function (e) {
					console.log('dianji');
					return false;
				};
			} else {
				document.οncοntextmenu = function (e) {
					return true;
				};
			}

			this.initDraw();
		},
		// 拓展工具点击动态组件
		extendToolsClick(curItem, curIndex) {
			this.extendToolsList.forEach((item, i) => {
				if (i != curIndex) {
					item.active = false;
				}
			});
			curItem.active = !curItem.active;
			if (curItem.active) {
				this.currentTool = curItem;
				// 加载对应工具
				curItem.initFunc && curItem.initFunc();
				// 加载对应组件
				this.currentComponent = curItem.component ? curItem.component : null;
				// 设置组件关闭方法
				this.currentCloseFunc = curItem.closeFunc ? curItem.closeFunc : null;
			} else {
				this.currentTool = null;
				// 移除对应组件
				curItem.closeFunc && curItem.closeFunc();
				if (curItem.component) {
					this.currentComponent = null;
				}
			}
		},

		closeFunc() {
			this.currentCloseFunc && this.currentCloseFunc();
			this.currentTool.active = false;
			// 取消对应组件激活状态
			// if (this.currentTool && this.currentTool.active) {
			// 	this.currentTool.active = false
			// }
		},
		closeCurComponent() {
			this.currentComponent = null;
		},
		// 专题制图删除
		closeScreenshot() {
			// 专题制图
			this.currentComponent = null;
		},
		// 标绘组件关闭相关方法
		closeDraw() {
			new Cesium.C_DrawHelper(viewer.scene).stopDrawing();
		},
		hide3DDraw() {
			this.show3DDraw = false;
		},
		hideGdDraw() {
			this.showGdDraw = false;
		},
		// cesium距离测量
		initMeasureDistance() {
			let endLineCallBack = () => {
				this.extendToolsList[1].active = false;
			};
			let MeasureDistance = new Cesium.C_DrawHelper(viewer.scene);
			MeasureDistance.startMeasureDistance({}, { endCallback: endLineCallBack });
		},
		// cesium面积测量
		initMeasureArea() {
			// this.$store.dispatch('app/set_showArea_fun', true)
			let endPolygonCallBack = () => {
				this.extendToolsList[2].active = false;
			};
			let MeasureArea = new Cesium.C_DrawHelper(viewer.scene);
			MeasureArea.startMeasureArea({}, { endCallback: endPolygonCallBack });
		},
		// 标绘
		initDraw() {
			new Cesium.C_DrawHelper(viewer.scene).stopDrawing();
			Cesium.C_DrawHelper.disableAllEditMode();
		},
		// 二三维切换
		getswitchToggle() {
			window.viewer.scene.morphTo2D(2);
		},
		closegetswitchToggle() {
			window.viewer.scene.morphTo3D(2);
		},
		// 经纬网
		graticuleToggle() {
			graticuLayer.setVisible(!this.graticuleShow);
		},
		// 经纬网关闭
		closegraticuleToggle() {
			graticuLayer.setVisible(this.graticuleShow);
		},

		// 初始化路径分析
		initRoadAnalysis() {
			this.$store.dispatch('app/set_showRoadAnalysis_fun', true);
		},
	},
};
</script>
<style lang="scss">
// .amap-controls-custom-diaster {
.amap-toolbar {
	left: 330px !important;
	top: 120px !important;
}
.amap-overviewcontrol {
	left: 340px !important;
	bottom: 0px !important;
}
.amap-scalecontrol {
	left: 469px !important;
	bottom: 8px !important;
	// visibility: visible;
	color: #fff !important;
}
// }
</style>
<style lang="scss" scoped>
.tools {
	pointer-events: all;

	.bottom-content {
		position: fixed;
		height: 42px;
		bottom: 57px;
		/* left: calc(20rem + 20px); */
		right: 82px;
		width: 243px;
		background: rgba(24, 31, 40, 0.8);
		border: 1px solid rgba(21, 77, 123, 0.5);
		// pointer-events: all;
		.tools-item {
			position: relative;
			width: 48px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid transparent;
			cursor: pointer;
			i {
				font-size: 18px;
				color: #4897c5;
			}
			.line {
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -13px;
				width: 26px;
				height: 1px;
				background: rgba(255, 255, 255, 0.2);
			}
			&:last-child {
				.line {
					display: none;
				}
			}
		}
		.active-item {
			border-left: 1px solid #fff;
			i {
				color: #fff;
			}
		}
		/deep/ .el-tooltip__popper:focus {
			// background: #e91e63;
			border: 1px solid transparent !important;
		}
		/deep/ .el-tooltip__popper:focus.is-active.is-focus:not(:active) {
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
		}
		.info-bar {
			position: absolute;
			left: 0px;
			bottom: 0px;
			font-size: 14px;
			.bar-item {
				display: inline-block;
				height: 40px;
				line-height: 40px;
				span:nth-child(2) {
					margin-left: 6px;
					color: #fff;
					margin: auto 10px;
				}
			}
		}
		.base-tools {
			// position: absolute;
			right: 360px;
			bottom: 0px;
			border: 1px solid rgba(21, 77, 123, 0.5);
			background: rgba(24, 31, 40, 0.8);
			z-index: 1;
			.tools-item {
				display: inline-block;
			}
			.active-item {
				border: 0px;
				border-top: 1px solid #fff;
			}
		}
		.extend-tools {
			position: absolute;
			right: 0px;
			bottom: 0px;
			/* border: 1px solid rgba(21, 77, 123, 0.5); */
			background: rgba(24, 31, 40, 0.8);
			.tools-item {
				display: inline-block;
			}
			.active-item {
				border: 0px;
				border-top: 1px solid #fff;
			}
		}
	}
	.map-switch {
		position: absolute;
		bottom: 50px;
		// right: 350px;
		right: pxTorem(350);
		cursor: pointer;
	}
	.gdmap-bottom-tools {
		.tools-item {
			position: relative;
			width: 48px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid transparent;
			cursor: pointer;
			i {
				font-size: 18px;
				color: #4897c5;
			}
			.line {
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -13px;
				width: 26px;
				height: 1px;
				background: rgba(255, 255, 255, 0.2);
			}
			&:last-child {
				.line {
					display: none;
				}
			}
		}
		.active-item {
			border-left: 1px solid #fff;
			i {
				color: #fff;
			}
		}
		/deep/ .el-tooltip__popper:focus {
			// background: #e91e63;
			border: 1px solid transparent !important;
		}
		/deep/ .el-tooltip__popper:focus.is-active.is-focus:not(:active) {
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
		}
		.extend-tools {
			position: absolute;
			// right: 341px;
			right: pxTorem(341);
			bottom: 0px;
			border: 1px solid rgba(21, 77, 123, 0.5);
			background: rgba(24, 31, 40, 0.8);
			.tools-item {
				display: inline-block;
			}
			.active-item {
				border: 0px;
				border-top: 1px solid #fff;
			}
		}
	}
}
</style>
